*{
    margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
body {
	background-color: #f5f7fa;
	color: #333;
	line-height: 1.6;
}
#wrapper{max-width: 1000px;
	margin: 0 auto;
	padding: 20px;
}
.block {
	background: white;
	border-radius: 10px;
	padding: 30px;
}
header {
    margin-bottom: 30px;
}

/* 等待阅读列表 */
#book-list {

    margin-bottom: 30px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

/* 添加新书籍表单 */
#add-book {
    
    margin-bottom: 30px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

/* 页脚 */
footer {
   
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

#page-banner {
    background: linear-gradient(135deg, #4a6fa5 0%, #166bb3 100%);
    color: white;
    padding: 40px 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 头部 标题样式 */
#page-banner h1.title {
    font-size: 2.5rem;
    letter-spacing: 1px;
    margin-bottom: 10px;
}
/* 头部 段落样式 */
#page-banner p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 20px;
}

/* 搜索框样式 */
#search-books input {
    width: 80%;
    max-width: 500px;
    padding: 12px 15px;
    border: none;
    border-radius: 30px;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 搜索框样式 聚焦效果 */
#search-books input:focus {
    width: 85%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
#book-list h2.title {
    color: #4a6fa5;
    font-size: 1.8rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f4f8;
}

/* 无序列表容器 */
#book-list ul {
    list-style: none;
}

/* 单本书 */
#book-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    margin-bottom: 10px;
    background: #f9fafc;
    border-radius: 6px;
    transition: all 0.2s ease;
}

/* 书名 */
.name {
    font-size: 1.1rem;
    color: #333;
}

/* 删除按钮 */
.delete {
    color: #e74c3c;
    background: transparent;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-weight: 600;
    border-radius: 4px;
    transition: all 0.2s ease;
}
#book-list li:hover {
    background: #f0f4f8;
    transform: translateX(5px);
}

/* 删除按钮 鼠标悬浮效果 */
.delete:hover {
    background: #e74c3c;
    color: white;
}
#add-book input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #4a6fa5;
}

/* 隐藏书籍单选框 文字内容 */
#add-book label[for="hide"] {
    cursor: pointer;
    color: #666;
}

/* 添加书籍输入框 */
#add-book input[type="text"] {
    flex: 1;
    min-width: 200px;
    padding: 12px 15px;
    border: 2px solid #e1e8ed;
    border-radius: 6px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

/* 添加书籍输入框 聚焦效果 */
#add-book input[type="text"]:focus {
    border-color: #4a6fa5;
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.1);
}

/* 添加书籍 确认按钮 */
#add-book button {
    background: #4a6fa5;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 添加书籍 确认按钮鼠标悬停效果 */
#add-book button:hover {
    background: #3a5d8c;
    transform: translateY(-2px);
}
#add-book {
    display: flex;
    /* flex 布局 */
    flex-wrap: wrap;
    /* 换行 */
    gap: 15px;
    /* 15px 间距 */
    align-items: center;
    /* 垂直居中效果 */
    background: white;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}
.tab-buttons {
    display: flex;
    list-style: none;
    margin-bottom: 20px;
    border-bottom: 2px solid #f0f4f8;
}

/* 选项卡的子项*/
.tab-buttons li {
    padding: 10px 20px;
    margin-right: 5px;
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    /* transition: all 0.3s ease; */
    font-weight: 600;
    color: #666;
}

/* 选项卡的子项，加上 active 时的效果*/
.tab-buttons li.active {
    background: #4a6fa5;
    color: white;
}

/* 文字容器，默认隐藏效果 */
.tab-content {
    display: none;
    padding: 10px 0;
}

/* 文字容器，加上 active class 时，显示 */
.tab-content.active {
    display: block;
    /* animation: fadeIn 0.5s ease; */
}

.tab-content p {
    margin-bottom: 15px;
    color: #555;
    line-height: 1.8;
}